<template>
  <div>
    <el-card :body-style="{ padding: '10px' }">
      <commform :form="form" @handleSub="handleSub" />
      表单提交参数{{obj}}
    </el-card>
  </div>
</template>

<script>
import commform from "@/components/form/commform";
export default {
  components: {
    commform
  },
  data() {
    return {
      form: {
        isHandle: true,
        labelWidth: "100px",
        size: "small",
        bindModle: {
          name: "",
          sex: null,
          desc: "",
          love: [],
          date: "",
          time: "",
          datetime: "",
          switch: true
        },
        formList: [
          {
            type: "input",
            label: "姓名",
            prop: "name",
            width: "220px",
            size: "small",
            rules: [{ required: true, message: "请输入", trigger: "blur" }]
          },
          {
            type: "select",
            label: "性别",
            prop: "sex",
            width: "220px",
            size: "small",
            rules: [{ required: true, message: "请选择", trigger: "blur" }],
            change:(v)=>{
              this.handleGetBySex(v)
            },
            options: [
              {
                label: "男",
                value: 0
              },
              {
                label: "女",
                value: 1
              }
            ]
          },
          {
            type: "radio",
            label: "性别2",
            prop: "sex",
            width: "",
            size: "small",
            change:(v)=>{
              this.handleGetBySex(v)
            },
            radios: [
              {
                value: 1,
                label: "男"
              },
              {
                value: 0,
                label: "女"
              }
            ]
          },
          {
            type: "checkbox",
            label: "爱好",
            prop: "love",
            width: "",
            size: "small",
            change:(v)=>{
              this.handleGetBySex(v)
            },
            checkboxs: [
              {
                value: 1,
                label: "游泳"
              },
              {
                value: 2,
                label: "唱歌"
              },
              {
                value: 3,
                label: "跑步"
              }
            ]
          },
          {
            type: "date",
            label: "日期",
            prop: "date",
            width: "",
            size: "small",
            valueFormat: "yyyy-MM-dd"
          },
          {
            type: "time",
            label: "时间",
            prop: "time",
            width: "",
            size: "small",
            valueFormat: "HH:mm:ss"
          },
          {
            type: "dateTime",
            label: "日期时间",
            prop: "datetime",
            width: "",
            size: "small",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          {
            type: "switch",
            label: "开关",
            prop: "switch",
            width: ""
          }
        ]
      },
      obj:null
    };
  },
  methods:{
      handleSub(obj){
          this.obj = obj
      },
      handleGetBySex(v){
        // 根据选项调用方法
         alert(`选择了${v}`)
      }
  }
};
</script>